<template>
  <div class="setting-container">
    <div class="setting-header">工作日设置</div>
    <div class="dia-sub">
      <div>
        <span>{{ weekData.year }}年</span>
        <span>{{ weekData.month }}月</span>
        <span>{{ weekData.day }}日</span>
        <span class="week">{{ weekData.week }}</span>
        <span>{{ baseData.factoryName }}</span>
        <span v-if="baseData.workshopName">-{{ baseData.workshopName }}</span>
        <span v-if="baseData.lineName">-{{ baseData.lineName }} </span>
      </div>
      <el-button
        v-if="!configDisabled"
        v-hasPermi="['planning:workday:add']"
        type="primary"
        size="mini"
        @click="handleConfig"
        >设置</el-button
      >
    </div>

    <div class="workday">
      <template v-if="classesDutyList && classesDutyList.length">
        <div v-for="(item, index) in classesDutyList" :key="item.id">
          <div v-if="item.produceStatus" class="team-status list">
            <span>{{ item.workTime }}</span>
            <span
              size="mini"
              class="status"
              v-text="item.produceStatus == 'ON' ? '班' : '休'"
              :class="item.produceStatus == 'OFF' ? 'off-work' : ''"
            >
            </span>
          </div>

          <template v-else>
            <el-collapse accordion v-model="activeTeam">
              <el-collapse-item :name="index" class="team">
                <template slot="title">
                  <div class="team-title">
                    <span class="team-name">{{ item.workTime }}</span>
                    <span
                      size="mini"
                      class="status"
                      v-if="item.produceStatus"
                      v-text="item.produceStatus == 'ON' ? '班' : '休'"
                      :class="item.produceStatus == 'OFF' ? 'off-work' : ''"
                    >
                    </span>
                  </div>
                </template>

                <template
                  v-if="
                    item.workshopDutyInfoList &&
                    item.workshopDutyInfoList.length
                  "
                >
                  <div
                    v-for="(ele, idx) in item.workshopDutyInfoList"
                    :key="ele.workshopId"
                  >
                    <div v-if="ele.produceStatus" class="list workshop-pick">
                      <span class="workshop-name">{{ ele.workshopName }}</span>
                      <span
                        size="mini"
                        class="status"
                        v-text="ele.produceStatus == 'ON' ? '班' : '休'"
                        :class="ele.produceStatus == 'OFF' ? 'off-work' : ''"
                      >
                      </span>
                    </div>

                    <template v-else>
                      <el-collapse accordion v-model="activeWorkshop">
                        <el-collapse-item :name="idx" class="workshop">
                          <template slot="title">
                            <div class="list workshop-list">
                              <span class="workshop-name">{{
                                ele.workshopName
                              }}</span>
                              <span
                                size="mini"
                                class="status"
                                v-if="ele.produceStatus"
                                v-text="ele.produceStatus == 'ON' ? '班' : '休'"
                                :class="
                                  ele.produceStatus == 'OFF' ? 'off-work' : ''
                                "
                              >
                              </span>
                            </div>
                          </template>

                          <template
                            v-if="
                              ele.lineDutyInfoList &&
                              ele.lineDutyInfoList.length
                            "
                          >
                            <div
                              v-for="tar in ele.lineDutyInfoList"
                              :key="tar.lineId"
                              class="line"
                            >
                              <div class="list line-list">
                                <span>{{ tar.lineName }}</span>
                                <span
                                  size="mini"
                                  class="status"
                                  v-if="tar.produceStatus"
                                  v-text="
                                    tar.produceStatus == 'ON' ? '班' : '休'
                                  "
                                  :class="
                                    tar.produceStatus == 'OFF' ? 'off-work' : ''
                                  "
                                >
                                </span>
                              </div>
                            </div>
                          </template>
                        </el-collapse-item>
                      </el-collapse>
                    </template>
                  </div>
                </template>
              </el-collapse-item>
            </el-collapse>
          </template>
        </div>
      </template>

      <!-- 没有设置工作日 -->
      <template v-else>
        <div v-for="item in teamList" :key="item.id" class="team-onle list">
          <span>{{ item.workTime }}</span>
          <span class="status" size="mini">班</span>
        </div>
      </template>
    </div>
  </div>
</template>

<script setup name="SettingContent">
import { toRefs } from "vue";

const props = defineProps({
  weekData: {
    type: Object,
    default: () => {},
  },
  baseData: {
    type: Object,
    default: () => {},
  },
  weekdayItem: {
    type: Object,
    default: () => {},
  },
  configDisabled: {
    type: Boolean,
    default: true,
  },
});

const { weekData, baseData, weekdayItem, configDisabled } = toRefs(props);

const pager = ref({
  total: 0,
  pageNum: 1,
  pageSize: 100,
});

const activeTeam = ref(0);
const activeWorkshop = ref(0);
const teamList = ref([]);
const classesDutyList = ref([]);
</script>

<style lang="scss" scoped>
.setting-container {
  .setting-header {
    height: 45px;
    border-bottom: 1px solid #ddd;
  }

  .dia-sub {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
    font-size: 15px;
    font-weight: 600;
    color: #606266;
    .week {
      margin: 0 8px;
    }
  }
  .workday {
    color: #606266;
    font-size: 15px;
    .team {
      .team-title {
        margin-bottom: 10px;
        .team-name {
          font-size: 15px;
        }
      }
    }
    .team:not(:last-child) {
      margin-bottom: 16px;
    }
    .team-onle:not(:last-child) {
      margin-bottom: 16px;
    }
    .team-status {
      margin-bottom: 16px;
    }
    .list {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .workshop-pick {
      margin-bottom: 10px;
      margin-left: 16px;
    }
    .workshop {
      margin-left: 16px;
      margin-bottom: 10px;
      .workshop-list:not(:last-child) {
        margin-bottom: 10px;
      }
    }
    .workshop-name {
      font-size: 15px;
    }
    .status {
      display: inline-block;
      vertical-align: middle;
      width: 36px;
      height: 26px;
      line-height: 26px;
      text-align: center;
      border-radius: 6px;
      font-size: 14px;
      background: #88c446;
      color: #ffffff;
      &.off-work {
        background: #f56c6c;
      }
    }
    .line {
      margin-left: 32px;
    }
    .line:not(:last-child) {
      margin-bottom: 10px;
    }
    :deep(.el-collapse) {
      border: none;
      .el-collapse-item__header {
        border: none;
      }
      .el-collapse-item__wrap {
        border: none;
        .el-collapse-item__content {
          padding: 0;
        }
      }
    }
  }
}
</style>
